<template>
	<div class="detail w944">
		<div class="label_top">
			<p><i class="line"></i>学分明细</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<el-select v-model="searchSelect" placeholder="学点类别" @change="getKcCourseList" class="th_2" >
					<el-option label="学点类别" value=""></el-option>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<div class="msearch">
					<input placeholder="请输入用户名字…" v-model="search" />
					<a @click="getKcCourseList"><img src="../../assets/qudaoImg/search.png" /></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column prop="name" label="类别"></el-table-column>
				<el-table-column prop="nickname" label="用户名"></el-table-column>
				<el-table-column prop="xfjl" label="学分学点消费"></el-table-column>
				<el-table-column prop="createTime" label="时间"></el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				detail:'',
				search: '',
				searchSelect:'',
				tableData: [],
				pagesize: 15,
				currentpage: 1,
				total: 1,
				allSelect: false,
				multipleSelection: [],
				options: [{
					value: '每日签到',
					label: '每日签到'
				}, {
					value: '课程学分',
					label: '课程学分'
				},
				{
					value: '收藏课程',
					label: '收藏课程'
				},
				{
					value: '分享朋友圈',
					label: '分享朋友圈'
				}, {
					value: '完善资料',
					label: '完善资料'
				}, {
					value: '商城兑换',
					label: '商城兑换'
				}]
			}
		},
		methods: {
			getKcCourseList() {
				this.$ajax({
					url: this.$root.jifuUrl +"/getCreditAndLearnPointRecordPage?"+'page='+this.currentpage+'&num='+ this.pagesize+'&name='+this.search+'&typename='+this.searchSelect+'&rootcompanyid=1',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total = res.data.data.pageParam.items;
						}
					}
				});
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getKcCourseList();
			}
		},
		mounted: function() {
			this.getKcCourseList();
			this.detail = this.$root.huasan.detail;
		}
	}
</script>